<template>
  <div>
    <van-nav-bar
      :title="title"
      left-arrow
      @click-left="$router.go(-1)"
      fixed
      class="app-detail__header"
    >
      <template #right>
        <van-popover
          theme="dark"
          placement="bottom-end"
          v-model="showPopover"
          trigger="click"
          :actions="actions"
          @select="onPopoverSelect"
        >
          <template #reference>
            <van-icon name="more-o" size="18" />
          </template>
        </van-popover>
      </template>
    </van-nav-bar>
    <van-share-sheet
      v-model="showShare"
      title="立即分享给好友"
      :options="shareOptions"
      @select="onShareSelect"
    />
  </div>
</template>
<script>
import Vue from 'vue'
import { Search, NavBar, Icon, Popover, ShareSheet, Notify } from 'vant'

Vue.use(Icon)
Vue.use(NavBar)
Vue.use(Search)
Vue.use(Popover)
Vue.use(ShareSheet)
export default {
  name: 'AppDetailHeader',
  props: ['title'],
  data () {
    return {
      showPopover: false,
      showShare: false,
      // 通过 actions 属性来定义菜单选项
      actions: [
        { text: '回到首页', icon: 'home-o', key: 'backHome' },
        { text: '分享', icon: 'share-o', key: 'share' }
      ],
      shareOptions: [
        { name: '微信', icon: 'wechat' },
        { name: '微博', icon: 'weibo' },
        { name: '复制链接', icon: 'link', key: 'copy' },
        { name: '分享海报', icon: 'poster' }
      ]
    }
  },
  methods: {
    onPopoverSelect (action) {
      switch (action.key) {
        case 'backHome': this.$router.push({ name: 'home' }); break
        case 'share': this.showShare = true; break
        default: break
      }
    },
    async onShareSelect (option) {
      if (option.key === 'copy') {
        await navigator.clipboard.writeText(window.location.href)
        // 弹出复制成功
        Notify('复制成功')
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.app-detail__header {
  /*  */
}
</style>
